<!DOCTYPE html>
<html lang="en">
<head>
    <title>留言板</title>
    <meta charset="UTF-8">
    <style>
        div {
            margin: 0;
            padding: 0;
            font-size: 12px;
            margin: 0 auto;
        }

        h3 {
            text-align: center
        }

        #container {
            width: 500px;
        }

        .article {
            border: 1px solid #a6cbe7;
            margin-top: 5px;
        }

        .author {
            background-color: #0099FF;
            width: 100%;
            height: 24px;
            line-height: 24px;
        }

        .content {
            height: 40px;
            padding: 10px;
        }

        .author span {
            float: right;
            padding-right: 10px;
        }

        .time {
            border-top: solid 1px #a6cbe7;
        }

        .page {
            text-align: right;
            height: 30px;
            line-height: 30px;
            padding-right: 10px;
        }

        .error {
            color: red;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/jquery.validate.js" type="application/javascript"></script>
    <script src="js/jquery.validate.regex.js" type="application/javascript"></script>
    <script>
        $(() => {
            let queryObj = {pageSize: 5, pageNum: 1}
            let pageInfo = {}

            // ------------- 搜索功能 ----------------
            $("#search").click(() => {
                if ($("input[name='searchAuthor']").val() != '') {
                    queryObj = {...queryObj, author: $("input[name='searchAuthor']").val()}
                }else{
                    delete queryObj.author;
                }
                if ($("input[name='searchMsg']").val() != '') {
                    queryObj = {...queryObj, message: $("input[name='searchMsg']").val()}
                }else{
                    delete queryObj.message;
                }
                queryData()
            })

            // ------------- 分页功能 ----------------
            $("#prePage").click(() => {
                queryObj.pageNum = queryObj.pageNum == 1 ? 1 : queryObj.pageNum - 1
                queryData()
            })

            $("#nextPage").click(() => {
                queryObj.pageNum =  pageInfo.isLastPage ? queryObj.pageNum : queryObj.pageNum + 1
                queryData()
            })


            // ------------- Ajax 获取分页数据----------------

            function queryData() {
                $.post('http://localhost:8080/message/query', queryObj, function (data) {
                    if (data.code == 200) {
                        $("#msgList").empty()
                        for (let msg of data.data.list) {
                            let newMsgNode = $(` <div class="article">
                            <div class="author">用户:${msg.author}<span>${msg.id}#</span></div>
                             <div class="content">${msg.message}</div>
                            <div class="time page">发表于:${msg.createDate}</div>
                            </div> `)
                            // node节点添加到指定位置
                            $("#msgList").append(newMsgNode);
                        }
                        pageInfo = data.data;
                    } else {
                        alert(data.message)
                    }

                }, 'json')
            }

            queryData()

            // ------------- 表单验证 + 留言操作 ----------------
            $("#myForm").validate({
                rules: {
                    author: {
                        required: true,
                        regex: /^\w{4,20}$/
                    },
                    message: {
                        required: true,
                    }
                },
                messages: {
                    author: {
                        required: "请输入姓名",
                        regex: "用户名格式不正确"
                    },
                    message: {
                        required: "请输入留言信息",
                    }
                },
                submitHandler: function (form) {
                    $.post(
                        "http://localhost:8080/message/insert",
                        {author: $("input[name='author']").val(), message: $("textarea").val()},
                        function (data) {
                            let {code, message} = data
                            if (data.code == 200) {
                                $('form')[0].reset();
                                queryData()
                            }
                        },
                        'json')
                }
            });
        })


    </script>
</head>

<body>
<div id="container">
    <div><h3>留言板</h3></div>
    <div> 用户：<input type="text" name="searchAuthor"> 留言：<input type="text" name="searchMsg"> <input id="search"
                                                                                                    type="button"
                                                                                                    value="搜索"></div>
    <div id="msgList">


        <!--        <div class="article">-->
        <!--            <div class="author">用户:{{msg.author}}<span>{{msg.id}}#</span></div>-->
        <!--            <div class="content">{{msg.message}}</div>-->
        <!--            <div class="time page">发表于:{{msg.createDate}}</div>-->
        <!--        </div>-->


    </div>

    <div class="page">
        <span id="prePage">上一页</span> <span id="nextPage">下一页</span>
    </div>
    <br>
    <div>
        <form id="myForm">
            <div>
                用户: <input type="text" name="author" value=""/>
            </div>
            <br>
            <div>
                留言: <textarea name="message" rows="5" cols="72"></textarea>
            </div>
            <div align="center"><input type="reset" value="清除"/> <input id="submit" type="submit" value="发表"/></div>
        </form>
    </div>
</div>
</body>
</html>
